<template>
  <div class="home">
    <h1>你好我是首页</h1>
    <button @click="addNum(5)">+</button>
    {{ $store.state.num }}
    <button @click="reduceNum(10)">-</button>
    <button @click="addNumAsync(20)">异步+</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    addNum (n) {
      this.$store.commit('addNum', n)
    },
    reduceNum (n) {
      this.$store.commit('reduceNum', n)
    },
    addNumAsync (n) {
      this.$store.dispatch('addNumAsync', n)
    }
  },
  mounted () {
    console.log(this)
  }
}

</script>
<style lang="scss" scoped>
/deep/ h1{
  color: red;
}
</style>
